<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { KeyValues } from '../../utils/types';
import { FormInstance, FormItemRule } from 'element-plus';

const cls = "manage-custom-edit"
const props = defineProps<{
  row?: any
}>()
const types = ['启用', '禁用']

const emit = defineEmits(['close', 'submitted'])

const form = ref<KeyValues>({
  required: 0
})

const formRef = ref<FormInstance>()

const rules: { [k: string]: FormItemRule } = {
  ruleName: { required: true, trigger: 'blur', message: '请输入规则名称' },
  num: { required: true, trigger: 'blur', message: '请输入状态码' },
  neirong: { required: true, message: '请输入提示内容' }
}

const close = () => emit('close')

const onOk = async () => {
  await formRef.value.validate()
  emit('submitted', { form: form.value })
}

onMounted(() => {
  if (props.row) {
    form.value = { ...props.row }
  }
})
</script>
<template>
  <ElDialog ref="dialogRef" title="编辑">
    <ElForm ref="formRef" label-width="8em" label-suffix=" :" :model="form" :rules="rules" :class="`${cls}_form`">
      <ElFormItem label="卖家名称" prop="ruleName" >
        <ElInput v-model="form.paramName" disabled/>
      </ElFormItem>
      <ElFormItem label="卖家信用代码" prop="nameListType">
        <ElInput disabled/>
      </ElFormItem>
      <ElFormItem label="状态">
        <ElRadioGroup v-model="form.type">
          <ElRadio v-for="_ in types" :key="_" :label="_">{{ _ }}</ElRadio>
        </ElRadioGroup>
      </ElFormItem>
      <ElAlert title="hmac-auth认证" type="info" :closable="false" />
      <ElFormItem label="appkey">
        <ElInput placeholder="请输入" />
      </ElFormItem>
      <ElFormItem label="appscrect">
        <ElInput placeholder="请输入" />
      </ElFormItem>
      <ElAlert title="key-auth" type="info" :closable="false" />
      <ElFormItem label="key">
        <ElInput placeholder="请输入" />
      </ElFormItem>
    </ElForm>
    <template #footer>
      <ElButton @click="close">取消</ElButton>
      <ElButton type="primary" @click="onOk">确定</ElButton>
    </template>
  </ElDialog>
</template>
<style lang="scss">
.manage-custom-edit_form{
  .el-form-item {
    margin-bottom: 10px;
  }
  .el-alert{
    margin-bottom: 10px;
    color: #000000;
  }
}
</style>

